<template>
  <div class="picturePreview">
    <div class="pictureheader bg_style border_style ">
      <div class="search-all">
        <YsButton style="margin-right:16px" class="searchBtn" v-print="printObj">打印</YsButton>
        <YsButton style="margin-right:16px" @click="onCanvasExport(1)">PDF下载</YsButton>
        <YsButton @click="onCanvasExport(0)">PNG下载</YsButton>
        <YsButton class="searchBtn" @click="goOff()">返回</YsButton>
        <YsButton class="searchBtn" type="primary" @click="goExit()">编辑</YsButton>
      </div>
    </div>
    <canvas-temp ref="canvasDom"></canvas-temp>
  </div>
</template>
<script>
import canvasTemp from "_c/tableReport/canvasTemp.vue";
import { mapActions } from "vuex";
export default {
  name: 'reportPreview',
  components: {
    canvasTemp
  },
  data() {
    return {
      printObj: {
        id: "printMe",
        popTitle: "打印模板",
        extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
      },
    }
  },
  mounted() {
    this.$refs.canvasDom.getParmasData({ template_id: this.$route.query.template_id, file_id: this.$route.query.file_id })
  },
  methods: {
    goExit() {
      this.$router.push({ name: 'reportDetails', query: { template_id: this.$route.query.template_id, file_id: this.$route.query.file_id } });
    },
    //退回
    goOff() {
      this.$router.go(-1);
    },
    onCanvasExport(index) {
      this.$refs.canvasDom.onExport(index)
    }
  }

}
</script>

<style scoped lang='less'>
.picturePreview {
  // height: 100%;
  // overflow: hidden;

  .pictureheader {
    margin-bottom: 8px;
    border-radius: 4px;
    border: 1px solid rgba(207, 215, 229, 0.6);
    display: flex;
    position: relative;
    .search-all {
      height: 72px;
      overflow: hidden;
      padding: 16px;
      margin-left: auto;
      .searchBtn {
        width: 80px;
        min-width: 80px;
        height: 40px;
        font-family: PingFang SC;
        margin-left: 16px;
      }
    }
  }
}
</style>